<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { tryit } from 'radash';

import mockApi from '@/api/mock';
import { useLoading } from '@/hooks/useLoading';
import { useTableHeight } from '@/hooks/useTableHeight';
import { ListParams } from '@/api/model/mockModel';
import { useListPage } from '@/hooks/useListPage';
import { SUCCESS_CODE } from '@/constants';
import { INIT_DATA } from './data/index';
import Lan1ItemView from './components/Lan1Item.vue';

const containerRef = ref<HTMLDivElement>();
const formData = ref({ ...INIT_DATA });
const { searchRef, searchHeight } = useTableHeight();
const { loadingStart, loadingEnd } = useLoading(containerRef);
const { pageData, handlePageChange, search, reset, formRef } = useListPage(getData);
const tableData = ref([]);
const searchList = ref([{ label: 'DHCP', value: false, key: 'DHCP', type: 'SwitchView' }]);

async function getData() {
  loadingStart();

  const postData: ListParams = { ...pageData.params, search: { ...formData.value } };
  const [err, res] = await tryit(mockApi.list)(postData);

  if (!err && res.code === SUCCESS_CODE) {
    const { list, total } = res.data;
    tableData.value = list.map((item: any) => {
      return item.network;
    });
    pageData.total = total;
  }
  loadingEnd();
}

const create = () => {};
onMounted(() => {
  getData();
});
</script>

<template>
  <div ref="containerRef" class="common-container LAN1-wrap">
    <div
      ref="searchRef"
      class="common-search-view"
      style="height: 40px; background-color: #fff; align-items: center; padding-right: 12px; border-radius: 5px"
    >
      <t-form ref="formRef" :data="formData" :colon="true" layout="inline">
        <form-item v-for="(item, index) in searchList" :key="index" :form-data="formData" :data="item"></form-item>
        <div class="opt">
          <div class="item"></div>
          <div class="item">
            <t-button class="common-button add-box" theme="primary" @click="create">
              <svg-icon class="item-icon" name="options-add"></svg-icon>
              <span>新增虚拟网卡</span>
            </t-button>
          </div>
        </div>
      </t-form>
    </div>
    <div class="content" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <div class="common-table-wrap transparent common-scrollbar" :style="{ height: `calc(100% - 20px)` }">
        <t-row :gutter="[16, 16]" class="common-table-row">
          <t-col v-for="(item, index) in tableData" :key="index" :lg="6" :xs="6" :xl="4" :xxl="3">
            <Lan1ItemView :data="item"></Lan1ItemView>
          </t-col>
        </t-row>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.LAN1-wrap {
  width: 100%;
  height: calc(100vh - @headerHeight - 42px - 22px - 30px) !important;
  .add-box {
    height: 28px;
    :deep(.t-button__text) {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-left: 8px;
      }
    }
  }
}
</style>
